<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ONESTAR-搜索结果</title>
  <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
  <script src="../static/js/jquery-3.4.1.min.js" th:href="@{/js/jquery-3.4.1.min.js}"></script>
  <script src="../static/js/bootstrap.js" th:href="@{/js/bootstrap.js}"></script>
  <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

  <style type="text/css">
  .content{
    width: 100%;
    height:620px;
  }
  .block{
    background: #bbbbbb;
    margin-left: 20px;
    margin-top:50px;
    height:120px;
    border:1px solid #000000;
    text-align: center;
    padding-top: 20px;
  }
  .download{

  }
  .type{
    border:1px solid red;
    color: red;
    position: relative;
    position: absolute;
    right:10px;
    top:10px;
  }
  </style>
</head>
<body>
<!--  导航栏-->
<nav class="navbar navbar-inverse center-block" style="margin-bottom: 100px;"  >
  <div class="container " style="width:800px; margin:0 auto;">
    <!--      图标-->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="图标" width="20px" height="20px" src="../static/images/tb.jpg" th:src="@{images/tb.jpg}">
      </a>
    </div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header ">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" th:href="@{/index}">首页</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#" >分类 <span class="sr-only">(current)</span></a></li>
        <li><a href="#" >留言</a></li>
        <li><a href="#" th:href="@{/resource}">资源</a></li>
        <li><a href="#" th:href="@{/image}">照片</a></li>
        <li><a href="#" >我</a></li>
      </ul>
      <!--</div>-->
      <form class="navbar-form navbar-right" action="#" th:action="@{/search}" method="post">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" name="query">
        </div>
        <button type="submit" class="btn btn-default" onclick="document.forms['search'].submit()">查询</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!--中间内容-->
<div class="content">
    <div class="container">
      <!--header-->

      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <div class="container">
              <div class="row">
                <div class="span8">
                  <ul class="nav nav-pills">
                    <li  class="active">
                      <a href="#" th:href="@{/resource}">全部</a>
                    </li>
                    <li  th:each="type: ${types}" >
                      <a href="#" th:href="@{/resource/type/{id}(id=${type.id})}"  th:text="${type.name}">全部</a>
                    </li>

                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="right aligned column">
            共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${pageInfo.total}"> 14 </h2> 个
          </div>
        </div>
      </div>

        <div class="block col-lg-5 col-sm-5" th:each="resources : ${pageInfo.list}">
          <div class="title" th:text="${resources.name}">java开发工具
          </div>
          <span th:text="${resources.typeName}" class="type">工具</span>
          <div class="descripe" th:text="${resources.descripe}">一款java开发工具方便开发</div>
          <div class="createTime" th:text="${resources.createTime}">2010-06-12</div>

          <a href="#" th:href="${resources.address}">下载</a>
        </div>

      分页
      <div class="ui bottom attached segment m-opacity stackable grid">
        <div class="three wide column" align="center">
          <a class="item" th:href="@{/search(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>
        </div>

        <div class="ten wide column" align="center">
          <p> <span th:text="${pageInfo.pageNum}" th:unless="${pageInfo.hasNextPage}"></span> / <span th:text="${pageInfo.pages}"></span> </p>
        </div>

        <div class="three wide column" align="center">
          <a class="item" th:href="@{/search(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>
        </div>
      </div>

    </div>


</div>
<br>
<br>



<!--底部栏-->
<!--<footer class="ui inverted vertical segment m-padded-tb-massive m-opacity" >-->
<!--  &lt;!&ndash;容器&ndash;&gt;-->
<!--  <div class="ui center aligned container">-->
<!--    <div class="ui inverted divided stackable grid">-->
<!--      <div class="four wide column">-->
<!--        <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced m-margin-top-max" >联系我</div>-->
<!--        &lt;!&ndash;<div id="newblog-container">&ndash;&gt;-->
<!--        &lt;!&ndash;<div class="ui inverted link list" th:fragment="newblogList">&ndash;&gt;-->
<!--        &lt;!&ndash;<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">最新文章</a>&ndash;&gt;-->
<!--        &lt;!&ndash;</div>&ndash;&gt;-->
<!--        &lt;!&ndash;</div>&ndash;&gt;-->
<!--        <div class="ui inverted link list">-->
<!--          <div href="#" class="m-text-thin">Email：onestarlr@hotmail.com</div>-->
<!--          <div href="#" class="m-text-thin">QQ：316392836</div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="four wide column" >-->
<!--        <div class="ui inverted link list">-->
<!--          <div class="item">-->
<!--            &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--            <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >关注公众号</div>-->
<!--            <img src="../static/images/oneStar.jpg" th:src="@{/images/oneStar.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="four wide column">-->
<!--        <div class="ui inverted link list">-->
<!--          <div class="item">-->
<!--            &lt;!&ndash;微信二维码&ndash;&gt;-->
<!--            <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >问题交流（QQ群）</div>-->
<!--            <img src="../static/images/QQ-question.jpg" th:src="@{/images/QQ-question.jpg}"  class="ui m-margin-top rounded image" alt="" style="width: 110px">-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash;博客运行时间统计&ndash;&gt;-->
<!--      <div class="four wide column">-->
<!--        <div style="font-size: large;font-weight: bold" class="ui inverted  m-text-thin m-text-spaced m-margin-top">客栈信息</div>-->
<!--        &lt;!&ndash;<p id="htmer_time" class="item m-text-thin"></p>&ndash;&gt;-->
<!--        <div id="blog-message">-->
<!--          <div class="ui inverted link list" style="align-content: center;margin-top: 10px" th:fragment="blogMessage">-->
<!--            <div class="m-text-thin" style="text-align: left;margin-left: 75px;">-->
<!--              文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogTotal}"> 14 </h2> 篇-->
<!--            </div>-->
<!--            <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--              访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogViewTotal}"> 14 </h2> 次-->
<!--            </div>-->
<!--            <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--              评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogCommentTotal}"> 14 </h2> 条-->
<!--            </div>-->
<!--            <div class="m-text-thin" style="text-align: left;margin-left: 75px">-->
<!--              留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogMessageTotal}"> 14 </h2> 条-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="ui inverted section divider"></div>-->
<!--    <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">我的客栈已营业：<span id="htmer_time" class="item m-text-thin"></span> (*๓´╰╯`๓)</div>-->
<!--    <a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank">赣ICP备20004408号-1</a>-->
<!--  </div>-->
<!--  </div>-->

<!--</footer>-->

</body>
</html>